<template>
 <div>
     <a-modal v-model:open="localVisible" width="1000px" title="Basic Modal" @ok="handleOk">
        <a-divider />
        <a-flex justify="space-between" align="center">
        <div class="content">
            <a-button type="primary">新建</a-button> <a-button @click="deleteRow">删除</a-button>
        </div>
        <a-checkbox v-model:checked="isChecked">Checkbox</a-checkbox>
        </a-flex>
        <a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
            <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
                <span>
                <a @click="editRow(record)">编辑</a>
                </span>
            </template>
            </template>
        </a-table>
        <a-divider />
        <template #footer>
            <div style="text-align: center; padding: 16px 24px;">
                <a-button @click="localVisible = false">取消</a-button>
                <a-button type="primary" @click="localVisible = false" style="margin-left: 12px;">确定</a-button>
            </div>
        </template>
    </a-modal>
    <viewOption v-model:visible = showViewOption></viewOption>
 </div>
</template>
<script setup lang="ts">
import {ref,watch} from 'vue';
import type { TableProps, TableColumnType} from 'ant-design-vue';
import viewOption from './components/viewOption.vue';

const props = defineProps<{
    visible: boolean
}>()
const emit = defineEmits<
{(e: 'update:visible', value: boolean): void}
>()
const localVisible = ref(props.visible);
watch(
  () => props.visible,
  (newVal) => {
    localVisible.value = newVal;
  },
);
watch(
  localVisible, 
  (newVal) => {
    emit('update:visible', newVal); // 本地v-model修改后，立即通知父组件
  }
);
// 切换visible状态并通知父组件
const handleOk = () => {
  localVisible.value = !localVisible.value;
};
const isChecked = ref(false);



export interface TableData {
  key: string,
  name: string,
  age: number,
  address: string,
  tags: string,
}

// 父组件维护表格数据源（唯一数据源）
const tableData = ref<TableData[]>([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: 'teacher',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: 'teacher',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: 'teacher',
  },
]);

// 父组件维护选中行的ID（与子组件同步）
const selectedRowKeys = ref<(string | number)[]>([]);

// 删除选中行功能
const handleDeleteSelected = () => {
  // 过滤掉选中的行（保留key不在选中列表中的数据）
  tableData.value = tableData.value.filter(
    (row) => !selectedRowKeys.value.includes(row.key)
  );
  // 清空选中状态（删除后无选中项）
  selectedRowKeys.value = [];
};

interface DataType {
  key: string,
  name: string,
  age: number,
  address: string,
  tags: string,
}

const columns: TableColumnType<DataType>[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
  },
];

const data = ref<DataType[]>([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: 'teacher',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: 'teacher',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: 'teacher',
  },
]);
// 关键修改：指定 rowSelection 的泛型为 DataType，并使用 Key[] 类型
let selectedRowKey: (number | string)[]
const rowSelection: TableProps<DataType>['rowSelection'] = {
  onChange: (selectedRowKeys: (string|number)[], selectedRows: DataType[]) => { // 这里将 string[] 改为 Key[]
    selectedRowKey = selectedRowKeys
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User',
    name: record.name,
  }),
}
const editRow = (record: DataType)=>{
     showViewOption.value = true
}
const deleteRow = ()=>{
    data.value = data.value.filter(item => !selectedRowKey.includes(item.key));
}


let showViewOption = ref<boolean>(false)
</script>

<style>

</style>